<template>
    <div class="box">
        <ul class="top">
            <li>
                <span class="iconfont icon-zuanshi"></span>
                官方商城
            </li>
            <li>
                <span class="iconfont icon-dunpaibaoxianrenzheng_o"></span>
                正品保证
            </li>
            <li>
                <span class="iconfont icon-smiling"></span>
                售后无忧
            </li>
        </ul>
        <ul class="content">
            <li v-for="(venue,index) in changguan.product" :key="index">
                <div class="img-box">
                    <img :src="venue.img" alt="">
                </div>
                <p>{{venue.name}}</p>
            </li>
        </ul>

    </div>
</template>

<script>
//chuang
export default {
    name:"Fenlei",
    props:['changguan'],
    data(){
        return{
           
        }
    }
}
</script>

<style scoped>
.box{
    width: 3.5rem;
    /* height: 1.1rem; */
    border-radius: .2rem;
    background-color: white;
    margin: 0 auto;
}
.top{
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    font-weight: 200;
    color: rgb(160, 156, 156);
    padding-top: .08rem;
}
.content{
    display: flex;
    justify-content: space-between;
    margin-top: .1rem;
    flex-wrap: wrap;
}
.content li{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 .05rem;
    
}
.img-box{
    width: .46rem;
    height: .46rem;
    border: 1px solid black;
    border-radius: .1rem;
}
img{
    width: 100%;
    height: 100%;
       border-radius: .1rem;
}
p{
    font-size: 12px;
    font-weight: 300;

}

</style>